<template>
  <div>
    <div :class="{active:isActive}">nisfd</div>
    <div :class="[obj]">nisfd</div>
    <div :style="{'color':'blue'}">nisfd</div>
    <div :style="[obj]">nisfd</div>
    <input v-focus type="text" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      obj: { color: "red" }
    };
  },
  extends: {
    data() {
      return {
        age: 22
      };
    },
    mounted() {
      console.log("extends");
    }
  },
  mixins: [
    {
      data() {
        return {
          gender: "mixin"
        };
      },
      mounted() {
        console.log(this.gender);
      }
    }
  ],
  directives: {
    focus: {
      bind(el, binding) {
        //dom还未插入dom中
        //只调用一次，指令第一次绑定到元素上，执行第一次初始化设置
        el.value = "10";
        console.log(binding);
      },
      inserted(el) {
        //绑定元素被插入Dom中调用
        el.focus();
        // el.style.backgroundColor='red'
      },
      update() {
        //虚拟节点更新时调用  任意表达式改变都会触发
      },
      componentUpdated() {
        //真实的dom更新时调用  任意表达式改变都会触发
      },
      unbind() {
        //解绑时调用
      }
    }
  }
};
</script>

<style scoped>
</style>